<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
      <ul id="ul">
      </ul>
</body>
</html>

<script>
     const ulDom = document.querySelector("#ul");
       var i = 1; 
       insertElement();

      //  while(i < 10000) {
       
      //  }

       function insertElement() {
          const li = document.createElement("li");
          li.innerHTML= `It is new P${i}`;
          window.requestAnimationFrame(function(){
            if( i < 1000) {
              ulDom.appendChild(li);
              insertElement();
              i++;
            }
          })
       }
     

</script>